@import "./reset.scss";
@import "./mixin.scss";
@import "./variables.scss";
@import "./animation.scss";
html {
  @include root-font-size();
}
.imp-text {
  font-weight: 600;
}
.strong{
  font-weight: 600;
}
.white{
  color: white;
}
.main-color {
  color: $blue;
}
.warning{
  color:#ee0a24;
}
.text-3 {
  color: $text-3;
}
.text-2 {
  color: $text-2;
}
//@author TalkTao
.text-1 {
  color: $text-1;
}
.text-4 {
  color: $text-4;
}
.back-page {
  background-color: #f2f3f5;
}
.back-gray {
  background-color: $bc;
}
.back-white {
  background-color: $fc;
}
.center {
  transform: translateX(-50%);
  margin-left: 50%;
}
.DCenter {
  transform: translate(-50%, -50%);
  margin-left: 50%;
  margin-top: 50%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
@for $size from 1 through 50{
  .flex-#{$size}{
    flex:$size;
  }
}
.object-fit-cover {
  object-fit: cover;
}
.border-box {
  box-sizing: border-box;
}
.fw-bold {
  font-weight: bold;
}
.wd-0 {
  width: 0;
}
.wd-100 {
  width: 100%;
}
.wd-75 {
  width: 75%;
}
.wd-50 {
  width: 50%;
}
.wd-25 {
  width: 25%;
}
.ht-100 {
  height: 100%;
}
.ht-75 {
  height: 75%;
}
.ht-50 {
  height: 50%;
}
.ht-25 {
  height: 25%;
}
.ht-0 {
  height: 0%;
}
.tl-0 {
  left: 0;
  top: 0;
}
.tb-0 {
  left: 0;
  bottom: 0;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-align-center {
  text-align: center;
}
.flex-column {
  flex-direction: column;
}

@each $key, $val in $fontSizeS {
  .fs-#{$key} {
    font-size: #{$val};
  }
}
//.d-flex {display: flex;}
@each $item in $displayList {
  .d-#{$item} {
    display: #{$item};
  }
}
//.flex-center {justify-content: center;}
@each $commonKey, $commonVal in $flexCommonValues {
  .flex-#{$commonKey} {
    display: flex;
    justify-content: #{$commonVal};
    align-items: #{$commonVal};
  }
  .align-self-#{$commonKey} {
    align-self: #{$commonVal};
  }
}
//.justify-content-between {justify-content: space-between;}
@each $key, $val in $justify-content-values {
  .justify-content-#{$key} {
    justify-content: #{$val};
  }
}
//.align-items-start {align-items-start: flex-start;}
@each $key, $val in $align-items-values {
  .align-items-#{$key} {
    align-items: #{$val};
  }
}
//.position-absolute {absolute;}
@each $pos in $positionList {
  .position-#{$pos} {
    position: #{$pos};
  }
}
//.overflow-x-scroll {overflow-x:scroll}
@each $dir in $overflowDirs {
  .#{$dir}-scroll {
    #{$dir}: scroll;
  }
}
//pt-5 {padding-top: 1vw}
.rounded-circle {
  border-radius: 50%;
}
@for $size from 1 through 50 {
  .rounded-#{$size} {
    border-radius: #{$size}vw;
  }
  @each $t_d_key, $t_d_val in $spaceTypes_Dirs {
    .#{$t_d_key}-#{$size} {
      #{$t_d_val}: #{$size}vw;
    }
  }
  .mx-#{$size} {
    margin-left: #{$size}vw;
    margin-right: #{$size}vw;
  }
  .my-#{$size} {
    margin-top: #{$size}vw;
    margin-bottom: #{$size}vw;
  }
  .px-#{$size} {
    padding-left: #{$size}vw;
    padding-right: #{$size}vw;
  }
  .py-#{$size} {
    padding-top: #{$size}vw;
    padding-bottom: #{$size}vw;
  }
}
//top-0 {top:　0;}
@each $type, $val in $positionTypes {
  .#{$type}-0 {
    #{$val}: 0;
  }
}
//bg-white {background-color: white;}
@each $key, $val in $colors {
  .bg-#{"" + $key} {
    background-color: #{$val};
  }
  .text-#{"" + $key} {
    color: #{$val};
  }
}
//.border-pill {border-radius: 50rem}
@each $key, $val in $radiusList {
  .border-#{$key} {
    border-radius: #{$val};
  }
}
//.opacity-75 {opacity: 0.75}
@for $index from 0 through 4 {
  .opacity-#{$index * 25} {
    opacity: #{$index * 0.25};
  }
}
//.text-center {text-align: center}
@each $var in $textAlignDirs {
  .text-#{$var} {
    text-align: #{$var};
  }
}
//.border-bottom-1 {border-bottom: 1px} .border-bottom {border-bottom: 1px}
@for $size from 0 to 5 {
  @each $posKey, $posVal in $positionTypes {
    @if $size == 0 {
      .border-#{$posKey} {
        border-#{$posVal}: 1px solid #e6e6e6;
      }
    } @else {
      .border-#{$posKey}-#{$size} {
        border-#{$posVal}: #{$size}px solid #e6e6e6;
      }
    }
  }
}
@mixin placeholderColor($color) {
  &::input-placeholder {
    /*WebKit browsers*/
    color: $color;
  }
  &::-webkit-input-placeholder {
    /*WebKit browsers*/
    color: $color;
  }
  &::-moz-input-placeholder {
    /*Mozilla Firefox*/
    color: $color;
  }
  &::-ms-input-placeholder {
    /*Internet Explorer*/
    color: $color;
  }
}
@mixin ellipsisRow($row: 1) {
  @debug "$row is #{$row}";
  @if $row == 1 {
    // @debug "1行";
    @extend .text-ellipsis;
  } @else {
    // @debug "多行";
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: #{$row}; // 显示的行
  }
}
